<template>
  <el-dialog
    title="内置监听器"
    width="900px"
    v-model="dialogVisible"
    append-to-body
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    :before-close="close"
  >
    <flow-listener @handle-select="handleSelect" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="checkComplete">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref, watch, defineProps, defineEmits } from 'vue';
  import FlowListener from '@/components/flow/Listener';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });

  const emits = defineEmits(['close', 'submit']);

  const dialogVisible = ref(props.visible);
  const listenerList = ref([]);

  watch(
    () => props.visible,
    (val) => {
      dialogVisible.value = val;
    },
    { immediate: true, deep: true },
  );

  function close() {
    dialogVisible.value = false;
    emits('close');
  }

  function checkComplete() {
    close();
    emits('submit', listenerList.value);
  }

  function handleSelect(selection) {
    const type = ['class', 'expression', 'delegateExpression'];
    let list = [];
    selection.forEach((data) => {
      const formData = {
        event: data.eventType,
        type: type[parseInt(data.valueType) - 1],
        className: data.value,
      };
      list.push(formData);
    });
    listenerList.value = list;
  }
</script>

<style scoped lang="scss"></style>
